{% extends 'base.html' %}
{% block head %}
	<link href="{{ path }}js/plugins/datatables/DT_bootstrap.css" rel="stylesheet">
	<link href="{{ path }}js/plugins/responsive-tables/responsive-tables.css" rel="stylesheet"> 
    
    <script src="{{ path }}js/demos/demo.tables.js"></script>
    <script src="{{ path }}js/plugins/datatables/jquery.dataTables.js"></script>
    <script src="{{ path }}js/plugins/datatables/DT_bootstrap.js"></script>
	<script src="{{ path }}js/plugins/responsive-tables/responsive-tables.js"></script>
    
{% endblock %}
	
{% block jquery %}	
	
    $( '#form-productos' ).submit(function() {   
    		laboratorio = $('#laboratorio').attr('value');
    		categoria = $('#categoria').attr('value');
            unidad = $('#unidad').attr('value');
            if(laboratorio != 0 && categoria != 0 && unidad != 0){
            	return true;
            }
            else{
            	alert("Diligencie todos los campos obligatorios.")
    			return false;
            }
    });
    
    $("#btn-nuevo").click(function() {
        registrarProducto(0);
    });

    $( $(".acc_producto[id^='prod']") ).click(function() {
            producto_id = $(this).attr('value');
			alert(producto_id);
            registrarProducto(producto_id);
    });

    
{% endblock %}

{% block javascript %}
	function registrarProducto(producto_id){
        $.ajax({
            url: "/inventario/productos/nuevo/",
            type: "POST",
            data : {producto_id:producto_id,
                    csrfmiddlewaretoken : $('#csrf_token >div >input').attr("value")
                     },
            dataType: "html",
            success: function(datos) {
                $('#nuevo-producto').html(datos);
            }
        });
    }
	
    function eliminar(producto_id){
            $.ajax({
              url: "/inventario/productos/borrar/",
              type: "POST",
              data : {producto_id:producto_id, 
                       },
              dataType: "html",
              success: function(datos) {
                    if(datos==1){
                        location.reload(true);
                    }
                    else{
                        alert("Este producto no puede ser eliminado porque existen unidades en el inventario.");
                    }
                  
              }
          });
        return false;
    }
{% endblock %}

{% block contenido %}
	{{ request.session.control }}
    	<div class="span12">
            <div class="widget">	
                <div class="widget widget-table">   
                    <div class="widget-header">						
                        <h3>
                            <i class="icon-th-list"></i>
                            Productos
                        </h3>
                    </div> <!-- /widget-header -->
                    <form id="frm_borrar" action="/inventario/productos/borrar/" method="post">
                    {% csrf_token %}
                    <div class="widget-content">
                        <table class="table table-striped table-bordered table-highlight" id="example">
                            <thead>
                            <tr>
                                <!--<th width="3%"></th>-->
                                <th width="5%" align="center">Cum</th>
                                <th width="6%" align="center">Código</th>
                                <th width="17%" align="center">Nombre</th>
                                <th width="12%" align="center">Laboratorio</th>
                                <th width="20%" align="center">Categoria</th>
								<th width="5%" align="center">Invima</th>
                                <th width="5%" align="center">Unidad</th>
                                <th width="15%" align="center">Descripcion</th>
                                <th width="15%" align="center">Observaciones</th>
                                <th width="4%" align="center">Editar</th>
                                <th width="4%" align="center">Borrar</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for producto in Productos %}
                                <tr class="{% cycle '' 'odd' %}">
                                    <td align="right"><label>{{ producto.cum }}</label></td>
                                    <td align="right"><label>{{ producto.codigo|default_if_none:"" }}</label></td>
                                    <td align="left"><label>{{ producto.nombre }}</label></td>
                                    <td align="left"><label>{{ producto.laboratorio }}</label></td>
                                    <td align="center"><label>{{ producto.categoria }}</label></td>
									<td align="center"><label>{{ producto.invima|default_if_none:"" }}</label></td>
                                    <td align="center"><label>{{ producto.unidad }}</label></td>
                                    <td align="left"><label>{{ producto.descripcion|default_if_none:"" }}</label></td>
                                    <td align="left"><label>{{ producto.observaciones|default_if_none:"" }}</label></td>
                                    <td class="table_center" ><a href="#myModal" id="prod_{{ producto.id }}" value="{{ producto.id }}" data-toggle="modal" ><img src="{{ path }}images/24x24/edit.png" onclick="registrarProducto({{ producto.id }});"/></a></td>
									<td><a href="#"><img src="{{ path }}images/delete.png" width="16" height="16" alt="Eliminar" onclick="if(confirm('¿Realmente desea eliminar el producto?')){eliminar({{ producto.id }});}"/></a></td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>
                    </div> <!-- /. widget-content -->
                    <div class="modal-footer">
                    	<!--<button type="submit" id="btn_eliminar" class="btn btn-medium">Eliminar</button>-->
                        <a href="#myModal" id="btn-nuevo" data-toggle="modal" class="btn btn-primary btn-medium">Nuevo</a>
                    </div>
                    </form>
                </div> <!-- /. widget-table -->
            </div> <!-- /. widget -->
        </div> <!-- /. span12 -->
        <div class="modal fade hide" id="myModal">
	        <form id="form-productos" class="form-horizontal" action="/inventario/productos/guardar/" method="post" enctype="multipart/form-data">
                  {% csrf_token %}
                  <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h3>Nuevo producto</h3>
                  </div>
                  <div class="modal-body" id="nuevo-producto">
                        
                  </div>
                  <div class="modal-footer">
                    <a href="#" class="btn btn-medium" data-dismiss="modal">Cerrar</a>
                    <button type="submit" id="btn_guardar" class="btn btn-primary btn-medium">Guardar producto</button>
                  </div>
            </form>
        </div>
{% endblock %}